<template>
  <div class="app">
    <h1>我是根组件App</h1>

    <!-- 自定义事件简便写法 -->
    <TodoHeader @getData="handler"></TodoHeader>

    <!-- 自定义事件完整写法 -->
    <TodoFooter ref="footer"></TodoFooter>
  </div>
</template>

<script>
import TodoFooter from "./components/TodoFooter.vue";
import TodoHeader from "./components/TodoHeader.vue";

export default {
  components: {
    TodoFooter,
    TodoHeader,
  },
  methods: {
    // <!-- 自定义事件简便写法 -->
    handler(params) {
      console.log(params);
    },
  },
  mounted() {
    // <!-- 自定义事件完整写法 -->
    this.$refs.footer.$on("money", (params) => {
      console.log(params);
    });



    // 孙子给爷爷送钱来了
    this.$bus.$on('moneys',(params)=>{
      console.log('孙子送了'+params)
    })
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  height: 100%;
  background: #eee;
}
</style>